html,body,ul,li,div{
    margin: 0;
    padding: 0;
    outline: 0;
}
ul,li{
    list-style-type: none;
}

.card{
    position: relative;
    margin: 30px;
    width: 1080px;
    height: 300px;
    /* overflow: hidden; */
}
.box{
    position: absolute;
    top: 150px;
    left: -150px;
    -webkit-animation: falling .4s forwards;
    animation: falling .4s forwards;
}
@-webkit-keyframes falling{
    100% { top: 0;left: 0; }
}
@keyframes falling{
    100% { top: 0;left: 0; }
}

.item{
    position: absolute;
    left: 0;
    width: 200px;
    height: 300px;
    padding: 10px;
    border: 1px solid red;
    border-image: linear-gradient(45deg, red, orange, yellow, cyan, blue, purple) 1;
    z-index: 5;
    box-sizing: border-box;
}
.item-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: url("asset/1.jpg") no-repeat center/cover;
}
.item:nth-child(2) .item-img{ background: url("asset/2.jpg") no-repeat center/cover; }
.item:nth-child(3) .item-img{ background: url("asset/3.jpg") no-repeat center/cover; }
.item:nth-child(4) .item-img{ background: url("asset/4.jpg") no-repeat center/cover; }
.item:nth-child(5) .item-img{ background: url("asset/5.jpg") no-repeat center/cover; }

.item:nth-child(2){
    -webkit-animation: m-left2 .8s .4s forwards;
    animation: m-left2 .8s .4s forwards;
    z-index: 4;
}
@keyframes m-left2{
    0%   { margin-left: 0; }
    50%  { margin-left: 0; }
    100% { margin-left: 220px; }
}
.item:nth-child(3){ 
    -webkit-animation: m-left3 1.2s 4s forwards;
    animation: m-left3 1.2s .4s forwards;
    z-index: 3;
}
@keyframes m-left3{
    0%   { margin-left: 0; }
    33.3%{ margin-left: 0; }
    66.6%{ margin-left: 220px; }
    100% { margin-left: 440px; }
}
.item:nth-child(4){ 
    -webkit-animation: m-left4 1.6s .4s forwards;
    animation: m-left4 1.6s .4s forwards;
    z-index: 2;
}
@keyframes m-left4{
    0%   { margin-left: 0; }
    25%  { margin-left: 0; }
    50%  { margin-left: 220px; }
    75%  { margin-left: 440px; }
    100% { margin-left: 660px; }
}
.item:nth-child(5){ 
    -webkit-animation: m-left5 2s .4s forwards;
    animation: m-left5 2s .4s forwards;
    z-index: 1;
}
@keyframes m-left5{
    0%   { margin-left: 0; }
    20%  { margin-left: 0; }
    40%  { margin-left: 220px; }
    60%  { margin-left: 440px; }
    80%  { margin-left: 660px; }
    100% { margin-left: 880px;}
}